<!-- 患者管理主页 patient-management.vue -->
<template>
	<view class="patient-management-container">
		<view class="search-container">
			<input class="search-input" placeholder="搜索患者姓名/手机号" v-model="searchKeyword" @confirm="searchPatients" />
			<button class="search-btn" @click="searchPatients">搜索</button>
		</view>

		<view class="patient-list">
			<view v-for="patient in patientList" :key="patient.id" class="patient-item"
				@click="viewPatientDetails(patient)">
				<view class="patient-avatar">
					{{ patient.name.charAt(0) }}
				</view>
				<view class="patient-info">
					<view class="patient-name">{{ patient.name }}</view>
					<view class="patient-detail">
						{{ patient.gender }} | {{ patient.age }}岁 | {{ patient.lastVisitDate }}
					</view>
				</view>
				<view class="patient-actions">
					<button class="action-btn medical-record" @click.stop="viewMedicalRecord(patient)">
						病历
					</button>
					<button class="action-btn schedule" @click.stop="scheduleAppointment(patient)">
						预约
					</button>
				</view>
			</view>
		</view>

		<view v-if="patientList.length === 0" class="no-patients">
			暂无患者记录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				patientList: [{
						id: '1',
						name: '李明',
						gender: '男',
						age: 45,
						lastVisitDate: '2024-03-15',
						phoneNumber: '13512345678'
					},
					{
						id: '2',
						name: '王红',
						gender: '女',
						age: 38,
						lastVisitDate: '2024-03-20',
						phoneNumber: '18612345678'
					}
				]
			}
		},
		methods: {
			searchPatients() {
				// 模拟搜索逻辑，实际应从后端获取
				if (this.searchKeyword) {
					this.patientList = this.patientList.filter(patient =>
						patient.name.includes(this.searchKeyword) ||
						patient.phoneNumber.includes(this.searchKeyword)
					)
				}
			},
			viewPatientDetails(patient) {
				uni.navigateTo({
					url: `/pages/patient-details/patient-details?id=${patient.id}`
				})
			},
			viewMedicalRecord(patient) {
				uni.navigateTo({
					url: `/pages/medical-record/medical-record?id=${patient.id}`
				})
			},
			scheduleAppointment(patient) {
				uni.navigateTo({
					url: `/pages/appointment/appointment?patientId=${patient.id}`
				})
			}
		}
	}
</script>

<style scoped>
	.patient-management-container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 20px;
	}

	.header {
		position: relative;
		height: 200px;
	}

	.header-image {
		width: 100%;
		height: 200px;
	}

	.header-title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		font-size: 20px;
		font-weight: bold;
	}

	.search-container {
		display: flex;
		margin: 15px;
		background-color: white;
		border-radius: 8px;
		padding: 10px;
	}

	.search-input {
		flex: 1;
		margin-right: 10px;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		padding: 5px;
	}

	.search-btn {
		background-color: #4A90E2;
		color: white;
		border-radius: 4px;
		padding: 5px 15px;
	}

	.patient-list {
		margin: 0 15px;
	}

	.patient-item {
		display: flex;
		align-items: center;
		background-color: white;
		margin-bottom: 10px;
		padding: 15px;
		border-radius: 8px;
	}

	.patient-avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #4A90E2;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-right: 15px;
	}

	.patient-info {
		flex: 1;
	}

	.patient-name {
		font-size: 16px;
		font-weight: bold;
	}

	.patient-detail {
		color: #888;
		font-size: 12px;
	}

	.patient-actions {
		display: flex;
		flex-direction: column;
	}

	.action-btn {
		margin: 5px 0;
		padding: 5px 10px;
		border-radius: 4px;
		font-size: 12px;
	}

	.medical-record {
		background-color: #4CAF50;
		color: white;
	}

	.schedule {
		background-color: #2196F3;
		color: white;
	}

	.no-patients {
		text-align: center;
		color: #888;
		margin-top: 50px;
	}
</style>